<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟数据监测</title>
</head>
<body>
<script>

    //这里模拟vue中的配置项中的data,只考虑一层对象的情况,vue里是使用递归将多层数据进行代理
    let data = {
        name: 'ZengYuJie',
        age: 18
    }

    function ObServer(data) {
        //这里拿到配置项data中所有的属性名
        const keys = Object.keys(data)
        // 对每一个属性名进行创建,创建的属性存储再这个obServer上
        keys.forEach((k) => {
                Object.defineProperty(this, k, {
                    get() {
                        console.log('obServer中的属性' + k + '被调用,值是来自于配置项data中的' + k)
                        //代理配置项中的属性
                        return data[k]
                    },

                    set(value) {
                        console.log('obServer中的属性' + k + '被修改并赋值给配置项data中的属性' + k)
                        // 代理配置项中的属性
                        data[k] = value
                    }
                })
            }
        )
    }

    //准备一个vue的实例对象
    let vm = {}
    const obs = new ObServer(data)
    //这里的连等是为了让data闭包
    vm._data = data = obs

</script>
</body>
</html>